<template>
  <div class="  min-h-screen  ">
    <div class="container mx-auto  ">
      <!---->

      <Header></Header>

      <!--    -->
      <div class="block  ">
        <el-pagination class="mpage"
                       background
                       layout="prev, pager, next"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       :total="total"
                       @current-change=page>
        </el-pagination>
        <el-timeline>
          <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
            <div class="  shadow-lg   p-3 ">
              <h1 class="hover:text-green-500 "><router-link target="_blank"  :to="{name: 'BlogDetail', params: {blogId: blog.id}}">{{ blog.title }}</router-link></h1>
              <p>{{ blog.description }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!--    -->


    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "../components/Header";
export default {
  name: "Index",
  components: {
    Header
  },
  data() {
    return {
      blogs: {},
      currentPage: 0,
      total: 0,
      pageSize: 5
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      axios.get("/blogs?currentPage=" + currentPage).then(resp => {
        console.log(resp)
        _this.blogs = resp.data.content
        _this.total = resp.data.totalElements
        _this.pageSize = resp.data.pageable.pageSize
      })
    }
  },
  created() {
    this.page(1)
  }
}
</script>

<style scoped>
</style>
